<template>
  <j-modal
    :title="title"
    width="600px"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="disableSubmit">
        <a-form :form="form" slot="detail">
          <a-list>
            <!-- 表名、表描述、表类型 -->
            <a-list-item>
              <a-row style="width: 100%;">
                <a-col :span="24">
                  <a-row :gutter="gutter" style="width: 100%;">
                    <a-col :span="24">
                      <!-- <a-form-item
                        style="width: 100%"
                        :labelCol="threeCol.label"
                        v-if="parent"
                        :wrapperCol="threeCol.wrapper"
                        label="父组名称">
                        <a-input :disabled='true' v-model='parent.name'/>
                      </a-form-item> -->
                      <a-form-item
                        style="width: 100%"
                        :labelCol="threeCol.label"
                        :wrapperCol="threeCol.wrapper"
                        label="组名称">
                        <a-input placeholder="请输入组名称" v-decorator="['name', validatorRules.name ]"/>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        style="width: 100%"
                        :labelCol="threeCol.label"
                        :wrapperCol="threeCol.wrapper"
                        label="上传图标">
                          <j-image-upload :isMultiple="false" v-decorator="['groupIcon', validatorRules.groupIcon ]"></j-image-upload>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-list-item>
          </a-list>
        </a-form>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { AiTestOnlineMixin } from '@/views/modules/aitest/onlinetest.mixins'

export default {
  name: 'LayerGroupModal',

  mixins: [AiTestOnlineMixin],
  provide() {
    return {
      getAllTable: this.getAllTable
    }
  },
  props: {
    actionButton: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data() {
    return {
      title: '操作',
      visible: false,
      parent: [],
      disableSubmit: false,
      model: {},
      gutter: 8,
      showRelationType: false,
      showTreeParentIdField: false,
      showIdSequence: false,
      showSubTable: false,
      threeCol: {
        label: { span: 4 },
        wrapper: { span: 24 - 4 }
      },
      confirmLoading: false,
      tableLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        name: {
          rules: [{
            required: true, message: '请输入组名称!'
          }]
        },
        groupIcon: {
          rules: [
            {
              required: true,
              message: '请上传图片!'
            }
          ]
        }
      },
      url: {
        add: '/subject/scSubjectLayerGroup/add',
        edit: '/subject/scSubjectLayerGroup/edit'
      },
      // 未验证通过
      VALIDATE_NO_PASSED: Symbol(),
      editPageFlag: false,
      fieldTempIds: [],
      showDesFormCode: false,
      templateFlag: false
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleChanges(value) {
      console.log('选中项：' + value)
    },
    add(parent) {
      this.parent = parent
      this.edit({})
    },
    edit(record) {
      this.visible = true
      this.form.resetFields()
      this.model = Object.assign({}, record)
      const pickAfter = pick(this.model, 'name', 'groupIcon')
      this.$nextTick(() => {
        this.form.setFieldsValue(pickAfter)
      })
    },
    close() {
      this.$emit('close')
      this.parent = null
      this.visible = false
    },
    handleOk() {
      if (this.disableSubmit) return
      this.validateFields()
    },
    handleCancel() {
      this.close()
    },
    /** 触发所有表单验证 */
    validateFields() {
      const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            values.pid = this.parent && this.parent.id
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const formData = Object.assign(this.model, values)
          console.log('发送数据：', formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              this.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
 .online-config-cust .has-feedback{display: block !important;}
 .input-table .thead .td span{width:100%}
</style>
